<template>
  <Modal v-model="open" :closeOnMask="false">
    <template #header>用户</template>
    <Form :model="form" :rules="rules" mode="twocolumn" ref="form">
      <FormItem label="用户名" prop="username" required>
        <Input type="text" v-model="form.username"/>
      </FormItem>
      <FormItem label="姓名" prop="name">
        <Input type="text" v-model="form.name"/>
      </FormItem>
      <FormItem label="所属机构" prop="branchSn">
<!--        <TreePicker :option="branchOption" v-model="form.branchSn" placeholder="所属机构" style="width:100%"-->
<!--                    filterable></TreePicker>-->
        <CategoryPicker
            v-model="form.branchSn"
            :option="branchOptions"
            @change="loadRoles"
        />
      </FormItem>
      <!--      <FormItem label="头像" prop="avatar">-->
      <!--        <Input type="text" v-model="form.avatar"/>-->
      <!--      </FormItem>-->
      <FormItem label="手机号" prop="phone">
        <Input type="text" v-model="form.phone"/>
      </FormItem>
      <FormItem label="性别" prop="gender">
        <Radio v-model="form.gender" dict="Gender"/>
      </FormItem>
      <FormItem label="状态" prop="enable">
        <HSwitch v-model="form.enable">
          <template #open>启用</template>
          <template #close>禁用</template>
        </HSwitch>
      </FormItem>
      <FormItem label="角色" single v-if="allRoles.length>0">
        <Checkbox :datas="allRoles" keyName="sn" titleName="name" v-model="form.roles"/>
      </FormItem>
    </Form>
    <template #footer>
      <Button @click="open=false">取消</Button>
      <Button :loading="loading" color="primary" @click="saveOrUpdate">确认</Button>
    </template>
  </Modal>
</template>
<script>
import {ajax, util,useKeyDown} from 'framework'
import {message,modal} from 'heyui'

export default {
  name: 'UserDialog',
  props:{
    branchOptions:{
      type:Object
    }
  },
  emits:['change'],
  data: function () {
    let keydown=useKeyDown()
    keydown.on('Escape',()=>{
      this.open=false
    })
    return {
      open: false,
      loading: false,
      isAdd: false,
      form: {
        username: null,
        password: null,
        userType: null,
        name: null,
        avatar: null,
        phone: null,
        enable: true,
        gender: 'M',
        branchSn:null,
        roles: [],
      },
      allRoles:[],

      //验证规则
      rules: {
        mobile: ['phone']
      }
    }
  },
  mounted() {
    // ajax.get("role/list").then(r=>{
    //   this.allRoles=r.data
    // })
  }, methods: {

    loadRoles(v){
      if(v){
        ajax.get("role/roleOfBranch",{branch:v.key}).then(r=>{
          this.allRoles=r.data
        })
      }else{
        this.allRoles=[]
      }
    },
    show(primary) {
      this.loading = true
      util.clean(this.form)
      this.form.gender="M"
      if (primary) {//show edit
        this.isAdd = false
        ajax.get("user/detail", primary).then(({data}) => {
          Object.assign(this.form, data)
          this.loadRoles({key:data.branchSn})
          this.loading = false;
          this.open = true;
        })
      } else {
        this.form.enable= true
        this.isAdd = true
        this.open = true
        this.loading = false
      }
    },
    saveOrUpdate() {
      var validResult = this.$refs.form.valid();
      if (validResult.result) {
        this.loading = true
        ajax.post(this.isAdd ? 'user/add' : 'user/save', this.form).then(r => {
          this.open = false;
          if(this.isAdd){
           // message("已保存,默认密码为123456")
            if(r.data){
              modal({
                title: '用户已保存',
                content: '默认密码:'+r.data,
                closeOnMask:false,
                buttons: [
                  {
                    type: 'cancel',
                    name: '确认',
                    style: 'primary'
                  }],
                events: {
                  cancel(modal){
                    modal.close();
                  }
                }
              });
            }else{
              message("已保存")
            }
          }else{
            message("已保存")
          }
          this.$emit("change", r.data)
        }).catch(e => {
          this.loading = false
        })
      }
    }
  }
}
</script>
